<template>
  <view
    class="c-popup"
    catch-move
    catchtouchmove
    :class="{
      hidden: !modelValue,
      'popup-left': props.position == 'left',
      'popup-right': props.position == 'right'
    }"
  >
    <view
      class="popup-body"
      :class="{
        'popup-top': props.position == 'top',
        'popup-bottom': props.position == 'bottom'
      }"
    >
      <slot></slot>
    </view>
    <view class="close-gb" @tap="modelValue = false"></view>
  </view>
</template>
<script setup>
import { View } from '@tarojs/components';

const props = defineProps({
  position: {
    type: String,
    default: 'bottom'
  }
});

const modelValue = defineModel(Boolean);
</script>
<style lang="scss">
.c-popup {
  z-index: 9;
  top: 0px;
  left: 0px;
  width: 750rpx;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  display: flex;
  opacity: 1;
  justify-content: space-around;
  align-items: center;
  transition: opacity 0.3s;

  &.hidden {
    display: flex;
    transition: opacity 0.3s, z-index 0.1s ease 0.3s;
    opacity: 0;
    z-index: -1 !important;
  }
  .popup-body {
    position: relative;
    z-index: 2;
    &.popup-top {
      width: 750rpx;
      align-self: flex-start;
      transition: transform 0.3s ease;
    }
    &.popup-bottom {
      width: 750rpx;
      align-self: flex-end;
      transition: transform 0.3s ease;
    }
    & > view {
      background-color: var(--color-caption);
    }
  }
  &.popup-right {
    justify-content: flex-end;
    .popup-body {
      height: 100%;
      display: flex;
      align-items: stretch;
      transition: transform 0.3s ease;
    }
  }
  &.popup-left {
    justify-content: flex-start;
    .popup-body {
      height: 100%;
      display: flex;
      align-items: stretch;
      transition: transform 0.3s ease;
    }
  }

  &.hidden .popup-body.popup-top {
    transform: translateY(-100%);
  }
  &.hidden .popup-body.popup-bottom {
    transform: translateY(100%);
  }
  &.popup-right.hidden .popup-body {
    transform: translateX(100%);
  }
  &.popup-left.hidden .popup-body {
    transform: translateX(-100%);
  }
  .close-gb {
    position: absolute;
    top: 0px;
    left: 0;
    width: 750rpx;
    height: 100%;
  }
}
</style>
